<template>
  <div class="request-list">
    <div v-if="loading" class="text-center py-4">
      <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-primary mx-auto"></div>
    </div>
    
    <div v-else-if="!requests || requests.length === 0" class="text-light-dark py-2">
      {{ emptyText }}
    </div>
    
    <div v-else>
      <div v-for="(request, index) in requests" :key="index" class="request-item border-b border-dark py-2">
        <div class="flex items-center">
          <span 
            class="badge mr-2" 
            :class="getMethodClass(request.method)"
          >
            {{ request.method || 'UNKNOWN' }}
          </span>
          <span class="font-mono text-sm break-all">{{ request.url || '' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  requests: {
    type: Array,
    default: () => []
  },
  emptyText: {
    type: String,
    default: '暂无数据'
  },
  loading: {
    type: Boolean,
    default: false
  }
});

function getMethodClass(method) {
  if (!method) return 'badge-yellow';
  
  switch(method.toUpperCase()) {
    case 'GET': return 'badge-blue';
    case 'POST': return 'badge-green';
    case 'PUT': return 'badge-purple';
    case 'DELETE': return 'badge-orange';
    default: return 'badge-yellow';
  }
}
</script>

<style scoped>
.request-list {
  margin-bottom: 1rem;
}

.request-item:last-child {
  border-bottom: none;
}
</style>
